import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import NavHeader from '@/components/NavHeader';
import { List } from 'antd-mobile';
import './style.scss'
import store from '@/store'
import { COMMON_JUMP_URL } from '@/typings/commonType'

const Item = List.Item;

class Center extends Component {

  jumpListUrl = url => {
    // 点击跳转之前，把目标地址给添加到redux中存储
    store.dispatch({ type: COMMON_JUMP_URL, payload: url })
    this.props.history.push(url)
  }

  render() {
    let nickname = store.getState().getIn(['user', 'nickname']) || ''
    return (
      <div className='center-container'>
        <NavHeader rightText="登录" right={true} onRight={() => this.props.history.push('/login')}>个人中心</NavHeader>
        <div className='center-logo-container'>
          <img src="http://img.1314000.cn/face.png" alt="" />
          {
            nickname ?
              <span>{nickname}</span>
              :
              <Link to="/login">立即登录</Link>
          }
        </div>
        {/* 列表 */}
        <List className="my-list">
          <Item arrow="horizontal" onClick={() => { this.jumpListUrl('/fav') }}>
            查看收藏
          </Item>
          <Item arrow="horizontal" onClick={() => { this.jumpListUrl('/record') }}>
            浏览记录
          </Item>
          <Item arrow="horizontal" onClick={() => { }}>
            个人设置
          </Item>
          <Item arrow="horizontal" onClick={() => { }}>
            关于我们
          </Item>
          <Item onClick={() => { }}>
            <div style={{ textAlign: 'center' }}>用户退出</div>
          </Item>
        </List>
      </div>
    );
  }
}

export default Center;
